<template>
    <Modal v-model="show"
           title="修改非管理员用户名密码"
           :mask-closable="false"
           :loading="loading"
            @on-ok="modifyPwds"
            @on-cancel="cancel"
    >
    <Alert type="warning" show-icon>
    	<p style="color:#f90">注意事项：
        <p>	1.第一步在进行“题目对应虚拟机密码修改”之前，必须确保在对应团队的环境中所有题目对应的虚拟机都手动建立了这个非管理员账号</p>
    	<p>	2.第二步确保每个团队的环境中所有题目对应的虚拟机中新建的非管理员账号相同</p>
    	<p>	3.例如对团队A进行题目对应虚拟机的User用户进行密码修改，团队A对应的环境子网络A中对用的题目虚拟机a、b、c，那么题目虚拟机a、b、c分别需要建立新的账号User</p>
    </Alert>
      <Row>
        <Form ref="userInfo" :model="userInfoTarget" :rules="userInfoValide" :label-width="80">
          <Col span="24">
            <FormItem label="选择团队" prop="teamId">
              <Select filterable v-model="userInfoTarget.teamId" placeholder="选择团队" >{{userInfoTarget.teamId}}
                <Option v-for="item in accessGroupList" :value="item.id" :key="item.id" :title="item.name">{{ item.name }}</Option>
              </Select>
            </FormItem>
              <FormItem label="用户名" prop="targetU">
                <Input v-model.trim="userInfoTarget.targetU" placeholder="输入要设置的用户名"></Input>
              </FormItem>
              <FormItem label="密码" prop="targetP">
                <Input  v-model.trim="userInfoTarget.targetP" placeholder="输入要设置的密码"></Input>
              </FormItem>
          </Col>
        </Form>
      </Row>
    </Modal>
</template>

<script>
  import {modifyPwd} from '@/api/drill_compete'
	export default {
		name: "modifyPwd",
    data(){
      const validateUsername = (rule, value, callback) => {
        let reg = /^[a-zA-Z][0-9a-zA-z]{3,7}$/
        if (value === 'root') {
          callback(new Error('请输入非管理员账号!'));
        }else if(!reg.test(value)){
          callback(new Error('请输入以字母开头的4到8位含数字或字母用户名!'));
        } else {
          callback();
        }
      };
      const validatePassword = (rule, value, callback) => {
        // let reg = /^[0-9a-zA-z]{8,}$/
        if(value.length<8){
          callback(new Error('请输入以数组或字母组合，大于或等于8位的密码'));
        } else {
          callback();
        }
      };
		  return{
		    show:false,
        loading:true,
        sceneId:'',
        accessGroupList:[],
        userInfoTarget:{
          teamId:'',
          targetU: '',
          targetP: '',
        },
        userInfoValide:{
          teamId:[
            { required: true, message: '请选择团队', trigger: 'change' }
          ],
          targetU: [
            { required: true, message: '用户名不能为空', trigger: 'change' },
            { validator: validateUsername, trigger: 'change' }
          ],
          targetP: [
            { required: true, message: '密码不能为空', trigger: 'change' },
            { validator: validatePassword, trigger: 'change'}
          ],
        }

      }
    },
    methods:{
      showModel(sceneId,accessGroupList){
        
        console.log(this.userInfo)
		    this.show = true;
        this.sceneId = sceneId;
        this.accessGroupList = accessGroupList;
      },
      cancel () {
        this.show = false;
        this.$refs.userInfo.resetFields();
      },
      modifyPwds(){
        this.$refs.userInfo.validate((valid) => {
          if (valid) {
           // this.$Message.success('Success!');
            let sceneId = this.sceneId;
            let {targetP:password,
                  teamId,
              targetU:userName} = this.userInfoTarget;
              modifyPwd({password,teamId,userName,sceneId}).then(data=>{
                if(data.code===1){
                  this.show = false;
                  this.$Message.info('用户密码修改成功!')
                  this.$refs.userInfo.resetFields();
                }else{
                  this.$Message.error(data.message);
                  this.controlLoding();
                }
              }).finally(()=>{
                this.controlLoding();
              })
          } else {
            this.$Message.error('表单输入有误，请按提示输入');
            this.controlLoding()
          }
        })
      },
      controlLoding(){
        this.loading = false;
        setTimeout(()=>{
          this.loading = true;
        },500)
      },
      setSelTeam(val){
        this.$set(this.userInfoTarget,'teamId',val)
      }
    }
	}
</script>

<style scoped>

</style>
